<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		
		<view class="btn">
			<u--text text="推流地址:"></u--text>
			<u--input
			    placeholder="请输入推流地址"
			    border="surround"
			    v-model="value"
			    @change="change"
			  ></u--input>
			  
			  <u--text text="视频模式:"></u--text>
			  <u-radio-group 
				@change="radioChange"
			      v-model="valueD"
			      placement="row">
			  	<u-radio name="SD" label="SD"></u-radio>
				<u-radio name="HD" label="HD"></u-radio>
				<u-radio name="FHD" label="FHD"></u-radio>
			  </u-radio-group>
			 
			 <u--text text="美颜:"></u--text>
			 <u-slider v-model="beauty" :showValue="true" min="0" max="9"></u-slider>

			  
			<u-button type="primary" text="去推流" @click="goPush()"></u-button>
		</view>
		
			<u-tabbar
				:value="currentTab"
				@change="changeTab"
				:fixed="true"
				:placeholder="true"
				:safeAreaInsetBottom="true"
			>
				<u-tabbar-item text="首页" icon="home"  ></u-tabbar-item>
				<u-tabbar-item text="播放" icon="play-right" ></u-tabbar-item>
			</u-tabbar>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '直播推流',
				value:'',
				valueD:'SD',
				beauty:0,
				currentTab:''
			}
		},
		onLoad() {

		},
		onReady() {
			let that = this;
			uni.getClipboardData({
				success: function (res) {
					let data = res.data;
					console.log(data);
					if(data && data.startsWith('rtmp')){
						that.value = res.data
					}
				}
			});
		},
		methods: {
			change(e){
				console.log(e)
				this.value = e
			},
			radioChange(e){
				console.log(e)
				this.valueD = e;
			},
			goPush(){
				if(this.value.startsWith('rtmp')){
					uni.navigateTo({
						url: '/pages/live/live?url='+this.value+'&mode='+this.valueD+'&beauty='+this.beauty,
						fail(e) {
							console.log(e);
						}
					})
				}else{
					uni.showModal({
						content: '只支持rtmp协议',
						complete() {
						}
					})
				}
				
			},
			changeTab(e){
				console.log(e)
				if(e==0){
				}else{
					uni.reLaunch({
						url:'/pages/video/video'
					})
				}
			},
			index(e){
				console.log(e)
			},
			video(e){
				console.log(e)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	
	.btn {
		width: 90%;
		padding: 10rpx;
	}
	
	.u-input {
		margin: 20rpx 0;
	}
	
	.u-radio-group{
		margin: 50rpx 0;
	}
</style>
